<template>
	<view>
		<image class="back_image" src="../../static/users/background.png" mode="aspectFill"></image>

		<view class="zhuye">
			<view class="price">
				<text>¥</text>
				668
			</view>

			<view class="xiao_l">
				<text class="zi_z1">评价：100</text>
				<text class="zi_z2">已售：100</text>
			</view>

			<view class="xuan_gui" @click="show = true">
				选规格
			</view>

			<view class="title">
				东京喰种金木研独眼喰种类型手办-附带赠品
			</view>

			<view class="youhui">
				<view v-for="(item,index) in 6">
					<view class="fenge_xian" v-if="index!=0"></view>
					<view class="youhui_two">
						45减10
					</view>
				</view>
			</view>

			<view class="kong_"></view>

			<view class="ping_detail">
				商品评价
				<text>查看全部 <image src="../../static/users/right.png" mode=""></image></text>
			</view>

			<view class="token">
				<image src="../../static/users/head.png" mode=""></image>
				<view class="head">
					一条大河宽又长
				</view>

				<view class="yang_s">
					炫酷亮黑头戴式
				</view>

				<view class="date">
					2020-10-20
				</view>

				<view class="content">
					音效不错，建议购买，比拼夕夕9.9包邮的音质好太多了，健身运动的时候不会脱落，耳朵可以全包住也不会感到疼痛，可以折
					音效不错，建议购买，比拼夕夕9.9包邮的音质好太多了，健身运动的时候不会脱落，耳朵可以全包住也不会感到疼痛，可以折
				</view>
			</view>

			<view class="ping_detail">
				商品详情
			</view>

			<image class="image_shop" src="../../static/users/shopimage.png" mode=""></image>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>

			<view class="xian"></view>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>

			<view class="bottom">

			</view>


			<view class="gosuan">
				<view class="settlement">
					<view class="zi0">共2件 <text class="text_1">合计：</text>
						<text class="text_2">¥</text>
						<text class="text_3">638</text>
					</view>

				</view>

				<view class="go_suan">
					确认提交
				</view>

				<view class="xia_"></view>

			</view>



		</view>

		<!-- 选择规格 -->
		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="main">
				<image class="image_shop" src="../../static/users/shop2.png" mode=""></image>
				<view class="shop_t">
					这是一个商品标题，这是一个商品标题，这是...
				</view>

				<view class="xi_an"></view>
				<view class="zi_9">
					规格分类
				</view>
				<view class="flex">
					<view v-for="(item,index) in menu" :class="num==index?'select':'gui'" @click="select(index)">
						<image src="../../static/users/guige.png" mode=""></image>
						<view class="gui_name">{{item.name}}</view>
					</view>

				</view>
				<view class="bottom"></view>
				<view class="gosuan">
					<view class="settlement">
						<view class="zi0"><text class="text_1">总计：¥0</text>
						</view>

					</view>

					<view class="go_suan">
						加入购物车
					</view>

					<view class="xia_"></view>

				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				menu: [{
					name: "规格分类名称"
				}, {
					name: "规格分类名称"
				}, {
					name: "规格分类名称"
				}, {
					name: "规格分类名称"
				}, {
					name: "规格分类名称"
				}, ],
				num: ""
			}
		},
		methods: {
			select(index) {
				this.num = index
			}
		},
		onLoad(e) {
			console.log(e.id);
		}
	}
</script>

<style lang="scss">
	.back_image {
		width: 750rpx;
		height: 600rpx;
	}

	.zhuye {
		position: absolute;
		top: 500rpx;
		width: 750rpx;
		height: 1600rpx;
		background: #FAFBFC;
		border-radius: 40rpx;

		.price {
			margin: 40rpx 0 0 30rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF4646;

			text {
				font-size: 24rpx;
			}
		}

		.xiao_l {
			position: absolute;
			top: 48rpx;
			left: 168rpx;
			width: 290rpx;
			height: 19rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			.zi_z1 {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.zi_z2 {
				margin-left: 39rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.xuan_gui {
			position: absolute;
			top: 42rpx;
			right: 30rpx;
			width: 89rpx;
			height: 36rpx;
			background: #F48F5B;
			border-radius: 18rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.title {
			margin: 29rpx 0 0 31rpx;
			width: 624rpx;
			height: 31rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}

		.youhui {
			// position: absolute;
			// left: 229rpx;
			// top: 136rpx;
			margin: 29rpx 0 43rpx 30rpx;
			height: 28rpx;
			border: 1px solid #FF5252;
			border-radius: 14rpx;
			width: 490rpx;
			display: flex;

			.youhui_two {
				margin: 0rpx 6px;
				float: left;
				right: 16rpx;
				font-size: 18rpx;
				// -webkit-transform: scale(0.5);
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 28rpx;
			}

			.fenge_xian {
				margin: 5rpx 0px;
				float: left;
				width: 1px;
				height: 18rpx;
				background: #FF5252;
			}
		}

		.kong_ {
			width: 750rpx;
			height: 10rpx;
			background: #F2F4FA;
		}

		.ping_detail {
			margin: 30rpx 0 0 41rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			height: 40rpx;
			line-height: 40rpx;

			text {
				position: absolute;
				left: 611rpx;
				top: 290rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #666666;
				line-height: 40rpx;
			}

			image {
				margin-left: 10rpx;
				width: 10rpx;
				height: 18rpx;
				line-height: 40rpx;
			}
		}

		.token {
			margin: 11rpx 0 0 30rpx;
			width: 690rpx;
			height: 204rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			position: relative;

			image {
				margin: 19rpx 0 0 30rpx;
				width: 88rpx;
				height: 88rpx;
			}

			.head {
				position: absolute;
				left: 139rpx;
				top: 30rpx;
				width: 400rpx;
				height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.yang_s {
				position: absolute;
				top: 70rpx;
				left: 139rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #666666;
			}

			.date {
				position: absolute;
				top: 41rpx;
				right: 29rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}

			.content {
				margin: 19rpx 0 0 31rpx;
				width: 628rpx;
				height: 60rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.image_shop {
			margin: 10rpx 0 0 31rpx;
			width: 690rpx;
			height: 368rpx;
		}

		.bottom {
			width: 750rpx;
			height: 400rpx;
		}

		.explain {
			margin: 59rpx 0 0 72rpx;
			width: 610rpx;
			height: 230rpx;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #777777;
				margin-bottom: 30rpx;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.text3 {
				margin-top: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

		}

		.xian {
			margin: 10rpx 0 0 71rpx;
			width: 610rpx;
			height: 1rpx;
			background: #EEEEEE;
		}

		.gosuan {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
			border-radius: 40rpx 40rpx 0px 0px;

			.settlement {
				width: 280rpx;
				height: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;

				.zi0 {
					margin: 39rpx 0 0 32rpx;

					.text_1 {
						margin-left: 20rpx;
					}

					.text_2 {
						color: #FF4646;
					}

					.text_3 {
						font-size: 40rpx;
						color: #FF4646;
					}
				}
			}

			.go_suan {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 190rpx;
				height: 68rpx;
				background: #181818;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.xia_ {
				position: absolute;
				left: 241rpx;
				bottom: 18rpx;
				width: 268rpx;
				height: 10rpx;
				background-color: black;
			}
		}


	}

	.main {
		width: 750rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		.bottom {
			width: 750rpx;
			height: 400rpx;
		}

		.gosuan {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
			border-radius: 40rpx 40rpx 0px 0px;

			.settlement {
				width: 280rpx;
				height: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;

				.zi0 {
					margin: 39rpx 0 0 32rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #181818;

					// 			.text_1 {
					// 				margin-left: 20rpx;
					// 			}

					// 			.text_2 {
					// 				color: #FF4646;
					// 			}

					// 			.text_3 {
					// 				font-size: 40rpx;
					// 				color: #FF4646;
					// 			}
				}
			}

			.go_suan {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 190rpx;
				height: 68rpx;
				background: #181818;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.xia_ {
				position: absolute;
				left: 241rpx;
				bottom: 18rpx;
				width: 268rpx;
				height: 10rpx;
				background-color: black;
			}
		}

	}

	.image_shop {
		margin: 40rpx 0 30rpx 31rpx;
		width: 200rpx;
		height: 150rpx;
	}

	.shop_t {
		position: absolute;
		left: 260rpx;
		top: 76rpx;
		width: 459rpx;
		height: 70rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;

	}

	.xi_an {
		width: 749rpx;
		height: 1rpx;
		background: #E5E5E5;
	}

	.flex {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
         .select {
         	border: 2px solid #000000;
			margin: 0 0 19rpx 30rpx;
			margin-top: 20rpx;
			width: 330rpx;
			height: 100rpx;
			background: #F2F4FA;
			border-radius: 30rpx;
			position: relative;
			image {
				margin: 10rpx 0 10rpx 10rpx;
				width: 100rpx;
				height: 80rpx;
			}
			
			
			.gui_name {
				position: absolute;
				top: 37rpx;
				right: 56rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}
         }
         
		.gui {
			margin: 0 0 19rpx 30rpx;
			margin-top: 20rpx;
			width: 330rpx;
			height: 100rpx;
			background: #F2F4FA;
			border-radius: 30rpx;
			position: relative;
            border: 2px solid #F2F4FA;
			image {
				margin: 10rpx 0 10rpx 10rpx;
				width: 100rpx;
				height: 80rpx;
			}

			
			.gui_name {
				position: absolute;
				top: 37rpx;
				right: 56rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}
		}
	}

	.zi_9 {
		margin: 29rpx 0 22rpx 37rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #181818;
	}
</style>
